<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            background-color: khaki;
        }
        body{
            background-color: yellow;
        }
        .container{
            width: 400px;
            height: 600px;
            background-color: rgba(0, 0, 0, 0.6);
            position: relative;
            /* z-index: 0; */
            /* 创建自己的层叠上下文 */
            margin: 50px;
        }
        .box{
            width: 300px;
            height: 100px;
        }
        .box1{
            position: absolute;
            background-color: rgba(255, 165, 0, 0.8);
            top: -20px;
            left: -20px;
            z-index: -1;
        }
        .box2{
            background-color: palevioletred;
        }
        .box3{
            background-color: pink;
            float: left;
            margin-top: -20px;
            margin-left: 20px;
            margin-bottom: -30px;
        }
        .box4{
            background-color: tomato;
            display: inline-block;
            margin-top: -80px;
            margin-left: 40px;
        }
        .box5{
            background-color: orange;
            position: relative;
            z-index: 0;
            left: 60px;
            top:-30px;
        }
        .box6{
            background-color: blue;
            position: relative;
            z-index: 2;
            left: 80px;
            top: -80px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="box box1">负的z-index</div>
        <div class="box box2">block块</div>
        <div class="box box3">float浮动盒子</div>
        <div class="box box4">inline-block</div>
        <div class="box box5">z-index:0</div>
        <div class="box box6">z-index:正值</div>
    </div>
</body>
</html>